<template>
	<view class="content">
		<view class="title">欢迎来到校园论坛</view>
		<view class="tasks" @click="schoolClick">
			<text>请选择您当前学校</text>
			<view class="tasksIcon">
				<up-icon name="arrow-down" bold size="35rpx"></up-icon>
			</view>
		</view>
		<view class="bottomFixed">
			<view class="bgImg">
				<image src="/pages/static/school.png" mode="widthFix"></image>
			</view>
			<view class="task">
				在这里，你可以
				<text class="emoji" style="font-size: 60rpx; margin-top: -0.2rem">😊</text>
				表白你喜欢的Ta
				<text class="emoji">😆</text>
				拼车
				<text class="emoji">😉</text>
				跑腿代买
				<text class="emoji" style="font-size: 40rpx">😜</text>
				尽情吐槽心中不快...
			</view>
		</view>
	</view>
	<up-popup :show="show" :round="10" :closeable="true" mode="bottom" @close="close" @open="open">
		<view class="vPopup">
			<view class="popTitle p20">请选择学校</view>
			<view class="popInput p20">
				<up-input
					v-model="schoolVal"
					@change="inuptChange"
					clearable
					placeholder="请输入学校名称，最少输入4个字"
					prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399;"
				></up-input>
			</view>
			<view class="schoolList" v-if="isShowList">
				<template v-if="schoolList.length > 0">
					<view class="schoolItem dis" v-for="item in schoolList" :key="item.id" @click="goIndex(item)">
						<view class="sItemL">{{ item.departmentName }}</view>
						<view class="sItemR">
							<up-icon name="arrow-right" color="#fff" bold size="35rpx"></up-icon>
						</view>
					</view>
				</template>
				<view class="noData" v-else>
					<view class="noDataImg dis">
						<image src="/pages/static/noData.png" mode="widthFix"></image>
					</view>
					<view class="noDataText" @click="clickMe">没有我的学校，点击开通</view>
				</view>
			</view>
		</view>
	</up-popup>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
	import { ref } from 'vue'
	import { getSchoolList, getUser } from '@/config/api.js'
	import { jsonString } from '../../uni_modules/uview-plus/libs/function/test'
	import { onLoad } from '@dcloudio/uni-app'

	const isIndex = ref('')
	onLoad((options) => {
		console.log('页面参数:', options)
		isIndex.value = options
	})

	// 选择学校弹窗
	const show = ref(false)
	const schoolVal = ref('')
	let throttleTimer = null
	// change事件
	const inuptChange = (val) => {
		if (val.length < 4) {
			if (throttleTimer) clearTimeout(throttleTimer)
			return
		}
		if (throttleTimer) return
		getSchoolListFun(val)
		throttleTimer = setTimeout(() => {
			throttleTimer = null
		}, 500)
	}
	const open = () => {}
	const close = () => {
		show.value = false
	}
	// 打开弹窗
	const schoolClick = () => {
		show.value = true
	}
	const schoolList = ref([])
	const uToastRef = ref(null)
	const isShowList = ref(false)
	// 获取学校
	const getSchoolListFun = async (val) => {
		const res = await getSchoolList({
			departmentName: val
		})
		if (res.code != 0) {
			show.value = false
			isShowList.value = true
			uToastRef.value.show({
				type: 'error',
				icon: true,
				title: '失败主题',
				message: res.message,
				iconUrl: 'https://uview-plus.jiangruyi.com/resources/toast/error.png'
			})
		} else {
			isShowList.value = true
			schoolList.value = res.data.list
		}
	}

	// 点击学校跳转
	const goIndex = async (item) => {
		const schoolInfo = {
			schoolId: item.id,
			schoolName: item.departmentName
		}
		const res = await getUser()
		if (res.code == 0) {
			uni.setStorageSync('schoolInfo', JSON.stringify(schoolInfo))
			uni.setStorageSync('token', res.data.token)
			uni.navigateBack({
				delta: 1
			})
		}
	}
	const clickMe = () => {
		console.log('点我开通')
		uni.openCustomerServiceChat({
			extInfo: { url: 'https://work.weixin.qq.com/kfid/kfcb9abd07476948988' },
			// 替换为你的客服账号信息
			corpId: 'wxdc7582d58c3f2da1', // 企业微信的CorpID
			userId: 'kfcb9abd07476948988', // 客服的UserId
			success() {
				console.log('客服会话打开成功')
			},
			fail(err) {
				console.error('客服会话打开失败', err)
			}
		})
	}
</script>

<style lang="scss">
	@import '@/uni_modules/uview-plus/theme.scss';

	page {
		background-color: #def0fc;
	}

	.content {
		position: relative;
		width: 100vw;
		height: 98vh;
		background-position: 0px 0px;
		background-repeat: repeat-x;
		background: url('https://www.xiaoyixing.cn/upload/6b33a1d3fbc54b3dbdb2331715fd8eb0.png') repeat fixed center;
		animation: animatedBackground 40s linear infinite;
	}

	.title {
		position: relative;
		padding-top: 20rpx;
		width: 100%;
		text-align: center;
		font-size: 75rpx;
		font-weight: 700;
		color: #fff;
		text-shadow: -2px -2px 0 #4f77e0, 2px -2px 0 #4f77e0, -2px 2px 0 #4f77e0, 2px 2px 0 #4f77e0;
		font-family: fantasy;
		z-index: 1;
	}

	.tasks {
		position: relative;
		margin: 0 auto;
		margin-top: 50rpx;
		padding: 20rpx 40rpx;
		width: 70%;
		border-radius: 66rpx;
		line-height: 50rpx;
		background-color: #fff;
		z-index: 2;
	}

	.tasksIcon {
		position: absolute;
		top: 30rpx;
		right: 22rpx;
		width: 50rpx;
		height: 50rpx;

		image {
			width: 100%;
			transform: translateY(0);
		}
	}

	.bgImg {
		width: 100%;
		image {
			width: 100%;
			transform: translateY(-96rpx);
		}
	}
	.task {
		position: absolute;
		bottom: 0;
		padding: 0 50rpx;
		padding-bottom: 20rpx;
		width: 100%;
		color: #fff;
		background: #67b2fe;
		text-align: center;
		font-size: 30rpx;
		.emoji {
			font-size: 30rpx;
		}
	}
	.bottomFixed {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 1;
	}
	.vPopup {
		height: 45vh;
		.popTitle {
			margin-bottom: 30rpx;
			font-size: 30rpx;
		}
		.popInput {
			width: 100%;
		}
		.schoolList {
			padding: 30rpx;
			width: 100%;
			height: 470rpx;
			overflow-y: auto;
			.schoolItem {
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				padding: 30rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #fff;
				background: #4f77e0;
			}
			.noData {
				width: 100%;
				.noDataImg {
					justify-content: center;
					width: 100%;
					image {
						width: 30%;
					}
				}
				.noDataText {
					width: 100%;
					text-align: center;
					color: #4f77e0;
				}
			}
		}
	}
	@keyframes animatedBackground {
		from {
			background-position: 0 0;
		}

		to {
			background-position: 100% 0;
		}
	}
</style>
